<template>
	<view>
		
		<view class="search_cont">
			<view class="search">
				<input type="text" placeholder-class="inputclass"  confirm-type="search"
				focus="true"
				placeholder="请输入关键字"
				v-model="searchdata"
				@confirm="onKeyInput"/>
			</view>
			<view class="search_code" @click="seArch()">
				搜索
			</view>
		</view>
		
		 <!-- 搜索历史 -->
		 <view class="search_history" v-if="ifhistory">
			 <view class="search_title">
				 <view>搜索历史</view>
				 <view @click="removeStorage()">
					 <image src="../../static/coen/del.png" mode="aspectFill"></image>
				 </view>
			 </view>
			<!-- tab -->
			<view class="menu_block">
				<block v-for="(item,index) in setdata" :key="index">
					<view @click="menubtn(item)">{{item}}</view>
				</block>
			</view>
		 </view>
		 
		<!-- 内容展示 -->
		<view class="content_left" v-if="shopcont">
			<block v-for="(item,index) in takeshop" :key="index">
				<view class="content_view" @click="takeOut(item.openid)">
					<view class="content_img">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<view class="content_title">
						<text class="content_take">{{item.shop}}</text>
						<view class="content_month">
							<view>月售200</view>
							<view>约{{item.duration}}分钟</view>
						</view>
						<view class="content_start">
							<text>起送￥{{item.delivering}}</text>
							<text>配送￥{{item.physical}}</text>
							<text>人均￥{{item.capita}}</text>
						</view>
						<view class="content_start">
							<image src="../../../static/coen/rili.png" mode="aspectFill"></image>
							<text>{{item.types}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 没有数据的提示 -->
		<tips ref="tips"></tips>
		 
	</view>
</template>

<script>
	// 引入post请求
	import{publicing} from '../../api/api.js'
	// 引入请求地址
	import{searchurl} from '../../api/request.js'
	//es6解构
	var {log}=console
	// 引入反馈组建
	import tips from '../../element/tips.vue'
	export default{
		components:{
			tips
		},
		data(){
			return{
				//搜索关键词
				searchdata:'',
				// 搜索结果
				takeshop:[],
				// 搜索历史
				setdata:[],
				// 是否有搜索历史
				ifhistory:false,
				//内容展示区
				shopcont:false
			}
		},
		methods:{
			// 点击搜索按钮触发的
			seArch(){
				//log(this.searchdata)
				if(this.searchdata!=''){
					this.ifhistory=false
					let searchKey=this.searchdata					
					this.searchData(searchKey)
					this.getStorage(searchKey)
				}				
			},
			// 搜索键盘触发的
			onKeyInput(e){
				//log(e.detail.value)
				let searchKey=e.detail.value
				if(searchKey!=''){
					this.ifhistory=false										
					this.searchData(searchKey)
					this.getStorage(searchKey)
				}				
			},
			// 本地存入搜索历史
			getStorage(searchKey){				
				// 先取出本地缓存的数据
				let seararray=uni.getStorageSync('search_key')||[]
				// 要存入一个数组
				seararray.unshift(searchKey)
				uni.setStorageSync('search_key',seararray)
			},
			// 取出本地缓存的数据
			setStorage(){
				let setdata=uni.getStorageSync('search_key')
				// 数组去重
				let setdataarr=Array.from(new Set(setdata))
				//log(setdataarr)
				this.setdata=setdataarr
				if(setdataarr==''){
					this.ifhistory=false
				}else{
					this.ifhistory=true
				}
			},
			// 手动清除搜索历史
			removeStorage(){
				uni.removeStorageSync('search_key')
				this.setStorage()
			},
			// 搜索历史的搜索
			menubtn(item){
				log(item)
				this.ifhistory=false
				this.searchData(item)
			},
			// 发送请求搜索
			searchData(searchKey){
				let data={
					searchdata:searchKey
				}
				publicing(searchurl,data)
				.then((res)=>{
					log(res)
					if(res.data=='没有商品数据'){
						//log('没有商品数据')
						this.shopcont=false
						let bull=true
						let tips='没有你要找的商品'
						this.tipsing()
					}else{
						let bull=false
						let tips=''
						this.tipsing()
						this.takeshop=res.data
					}					
				})
				.catch((err)=>{
					log(err)
				})
			},
			//反馈提示
			tipsing(bull,tips){
				//如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()
				this.$nextTick(()=>{
					this.$refs.tips.init(bull,tips)
				})
			}
		},  
		created() {
			this.setStorage()
		}
	}
</script>

<style scoped>
	@import "../../common/com_list.css";
	.content_left{
		margin: 0 20upx;
	}
	.search{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		background: #F8F8F8;
		border-radius: 20upx;
		margin-left: 20upx;
	}
	.search input{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 30upx;
		color: #666666;
		padding-left: 30upx;
	}
	.search_cont{
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
		padding: 30upx 0;
	}
	.search_code{
		width: 150upx;
		height: 50upx;
		text-align: center;
		font-size: 30upx;
	}
	/* 搜索历史 */
	.search_history{
		margin: 20upx;
	}
	.search_title{
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60upx;
		line-height: 60upx;
	}
	.search_title image{
		width: 36upx;
		height: 36upx;
		display: block;
	}
	.menu_block view{
		background: #f7f8fa;
		border-radius: 6upx;
		font-size: 27upx;
		color: #292c33;
		text-align: center;
		padding: 10upx;
		margin: 20upx 20upx 0 0;
	}
	.menu_block{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
</style>
